<template>
	<div class="tab-bar-item" @click="itemClick">
	   <div v-if=" !isActive"><slot name="tab-icon"></slot></div>
	   <div v-else><slot name="tab-icon-select"></slot></div>
	   <div :style="activeClass"><slot name="tab-title"></slot></div>
	</div>
</template>

<script>
export default{
	props:{
		 path:String,
		 acClass:{
			 type:String,
			 default:'red'
		 }
	},
	data(){
		return{
			// isActive:true
		}
	},
	methods:{
		itemClick(){
			// .catch(err=>err)解决点击两次按钮报错的情况
			// 跳转的路径根据父元素的传过来的
			this.$router.replace(this.path).catch(err=>err)
			// console.log(this.$route.path)
			// console.log(this.path)
		}
	},
	computed:{
		isActive(){
			// return this.$route.path===this.path
			// index==-1 不存在 。index!==-1说明处在
			// 这里不等于-1是因为页面中调用计算属性（isActive）的时候取反了
			return this.$route.path.indexOf(this.path) !==-1
		},
		   
		   // 动态修改颜色
		 activeClass(){
			 // 如果导航是选择状态那么就输出传过来的对象，否则就输出默认值
			 return this.isActive ? {color:this.acClass}:{}
		 }
		   
	}
}
</script>

<style>
	.tab-bar-item {
		flex: 1;
		text-align: center;
		font-size: 13px;
		color: #cccccc;
		margin-top: 3px;
	}
	
	.tab-bar-item img {
		width: 24px;
		height: 24px;
	}

</style>
